<template>
    <div>
           <van-nav-bar title="乐购" left-text="返回" left-arrow  @click-left="onClickLeft"/>
           <img class="banner" src="http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png" alt="">
             <div class="title">
               <span>综合</span>
               <span class="price"> 价格
                   <div>
              <div @click="getDesc" class="img1"></div>
              <div @click="getAsc" class="img2"></div>
              </div>
               </span>      
               <span>分类</span>
             </div>
               <ul>
                    <router-link tag="li" :to="`/home/newgoods?id=${item.id}`"
                     v-for="item in list" :key="item.id">
                   <!-- <li v-for="item in list" :key="item.id"> -->
                   <img :src="item.list_pic_url" alt="">
                   <p class="one">{{item.name}}</p>
                   <p class="two">￥{{item.retail_price}}</p>
                   <!-- </li> -->
                   </router-link>
               </ul>
     </div>
     
    
</template>

<script>
import {goodsList} from "@/api/home/goods"
    export default {
        data(){
            return{
                list:[],
                order:""
                }
            
        },
        methods:{
            onClickLeft(){
                this.$router.go(-1)
            },
            // 大->小            
            getDesc(){
                this.order="desc";
                goodsList({
                    isNew:1,
                    order:this.order
                }).then((res)=>{
                    this.list=res.data
                })
            },
            // 小->大
            getAsc(){
                this.order="asc";
                  goodsList({
                    isNew:1,
                    order:this.order
                }).then((res)=>{
                    this.list=res.data
                })
            },
        },
        created() {
             goodsList({
              isNew:1,
             order:this.order
            }).then(res=>{
                // console.log(res);
               this.list=res.data
                // console.log(this.list);
            })
        }
    }
</script>

<style lang="scss" scoped>
.banner{
    width: 375px;
    height: 140px;
}
.title{
    margin:0 10px;
     width: 90%;
    background-color: #fff;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .price {
        width: 12%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .img1 {
          width: 8px;
          height: 6px;
          background: url(../../../assets/price.png) no-repeat center;
          background-size: 8px 12px;
          background-position: 0 0;
          cursor: pointer;
        }
        .img2 {
          width: 8px;
          height: 6px;
          background: url(../../../assets/price.png) no-repeat center;
          background-size: 8px 12px;
          background-position: 0 -6px;
          cursor: pointer;
        }
    }
}
 ul{   
     height: 600px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        background-color: #fff;
        li{
            width: 186px;
            background-color: oldlace;
            margin-bottom: 5px;
            
           img{
               width: 151px;
               height: 151px;
               margin:5px;   
           }
           .one{
               font-size: 12px;
               color: slateblue;
           }
           .two{
               color:#b4282d;
               font-size: 0.4rem;
           }
         

        }
 }

</style>